<template>
  <div>
    <div ref="pie_chart" class="pie_chart">
    </div>
  </div>
</template>

<script>
  export default {
    name: "PieChart",
    data() {
      return {
        chartData:
          [
            {value: 1048, name: '搜索引擎'},
            {value: 300, name: '视频广告'}
          ]
        ,
        isIncome: {
          type:Boolean,
          default: true
        }
      }

    },
    mounted() {
      this.initChart();
      this.getData();
    },
    methods: {
      initChart() {
        this.chartInstance = this.$echarts.init(this.$refs.pie_chart)
      },
      getData() {
        this.updateChart();
      },
      updateChart() {
        let text = '';
        if (this.isIncome) {
          text = '应收合计: ' + (this.chartData[0].value +
            this.chartData[1].value) +' 元'
        } else {
          text = '应付合计: ' + (this.chartData[0].value +
            this.chartData[1].value) +' 元'
        }
        const option = {
          title : {
            text: text,
            x:'center',
            y: 'bottom',
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.chartData
            }
          ]
        };
        this.chartInstance.setOption(option)
      }
    },

  }
</script>

<style scoped>
  .pie_chart {
    float: left;
    width: calc((100% - 420px) / 2 - 10px);
    height: 250px;
    background: white;
    position: relative;
    margin-left: 20px;
  }
</style>